<template>
  <div style="width: 100%; height: 100%">
    <div style="height: 5%; width: 90%; margin: 10px 0px 0 10px">
      <div style="float: left">
        <img slot="item-icon" src="@/assets/img/little_icon/nfbbtj.png" />&nbsp;
      </div>
      <span style="font-size: 20px">农房报表统计</span>
    </div>
    <el-divider></el-divider>

    <div>
        <div style="margin-left:15%"> <span style="font-weight:600">申请总数</span></div>
        <div style="width: 100%">
          <table border="0" style="width: 100%; text-align: left">
            <tr>
              <td style="width:11.5%">&nbsp;</td>
              <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ fromData.totle }}份</td>

            </tr>
            <tr>
              <td style="width:10%">&nbsp;</td>
              <td style="color:red">同比 &nbsp;+ &nbsp;{{fromData.totle}}% <img src="@/assets/img/little_icon/up.png" /> </td>
            </tr>
            <tr>
              <td style="width:10%">&nbsp;</td>
              <td style="color:red">环比 &nbsp;+ &nbsp;{{fromData.totle}}% <img src="@/assets/img/little_icon/down.png" /></td>
              
            </tr>
          </table>
        </div>
      <el-divider></el-divider>
    </div>
    <div>
        <div style="width: 100%">
          <table border="0" style="width: 100%; text-align: center">
            <tr>
              <td>已发证</td>
              <td>农房审批完成率</td>
            </tr>
            <tr>
              <td>{{ fromData.totle }}份</td>
              <td>{{ fromData.totle }}%</td>
            </tr>
            <tr>
              <td style="color:red">同比&nbsp;+ {{fromData.totle}}% <img src="@/assets/img/little_icon/up.png" /></td>
              <td><div style="width:70%;margin-left:20%"><el-progress :percentage="percentage" style="width:100%" :color="customColor"></el-progress></div></td>
            </tr>
            
          </table>
        </div>
      <el-divider></el-divider>
    </div>
    <div>
        <div style="width: 100%">
          <table border="0" style="width: 100%; text-align: center">
            <tr>
              <td>已发证</td>
              <td>农房审批完成率</td>
            </tr>
            <tr>
              <td>{{ fromData.totle }}份</td>
              <td>{{ fromData.totle }}%</td>
            </tr>
            <tr>
              <td style="color:red">同比&nbsp;+ {{fromData.totle}}% <img src="@/assets/img/little_icon/up.png" /></td>
              <td><div style="width:70%;margin-left:20%"><el-progress :percentage="percentage" style="width:100%" :color="customColor"></el-progress></div></td>
            </tr>
            
          </table>
        </div>
      <el-divider></el-divider>
    </div>
    <div>
        <div style="width: 100%">
          <table border="0" style="width: 100%; text-align: center">
            <tr>
              <td>已发证</td>
              <td>农房审批完成率</td>
            </tr>
            <tr>
              <td>{{ fromData.totle }}份</td>
              <td>{{ fromData.totle }}%</td>
            </tr>
            <tr>
              <td style="color:red"> 同比&nbsp;+ {{fromData.totle}}% <img src="@/assets/img/little_icon/up.png" /></td>
              <td><div style="width:70%;margin-left:20%"><el-progress :percentage="percentage" style="width:100%" :color="customColor"></el-progress></div></td>
            </tr>
            
          </table>
        </div>
      <el-divider></el-divider>
    </div>
    <div>
        <div style="width: 100%">
          <table border="0" style="width: 100%; text-align: center">
            <tr>
              <td>已发证</td>
              <td>农房审批完成率</td>
            </tr>
            <tr>
              <td>{{ fromData.totle }} 份</td>
              <td>{{ fromData.totle }}%</td>
            </tr>
            <tr>
              <td style="color:red">同比&nbsp;+ {{fromData.totle}}% <img src="@/assets/img/little_icon/up.png" /></td>
              <td><div style="width:70%;margin-left:20%"><el-progress :percentage="percentage" style="width:100%" :color="customColor"></el-progress></div></td>
            </tr>
            
          </table>
        </div>
    </div> 
  </div>
</template>

<script>
export default {
  name: "HouItem",
  data() {
    return {
      fromData: {
        totle: 0,
        percentage: "+0.22%",
      },
      percentage: 20,
        customColor: '#409eff',
    };
  },
  mounted() {
    this.drawCricle();
    this.drawZX();
  },
};
</script>

<style>
</style>